<template>
  <view class="goods-card" @tap="handleToDetail">
    <image :lazy-load="true" :src="info.goods_cover" />
    <view class="goods-info" :class="exChangeOverClass">
      <view class="goods-info-name">
        {{ info.goods_name }}
      </view>
      <view class="goods-info-extra">
        <view class="spend-flower">
          <text>{{ info.use_petal_num }}</text
          ><text>花朵</text>
        </view>
        <view v-if="info.is_exchanged_over" class="over">
          已兑完
        </view>
        <view v-if="isShowLess20" class="surplus">
          仅剩{{ info.goods_stock }}件
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: { type: Object, required: true }
  },
  computed: {
    /**已兑完类名 */
    exChangeOverClass() {
      return {
        "exchange-over": this.info.is_exchanged_over
      };
    },
    /**是否显示还剩多少件 */
    isShowLess20() {
      const { is_infinite_stock } = this.info;
      return !!is_infinite_stock
        ? false
        : !this.info.is_exchanged_over && this.info.is_less_than_20;
    }
  },
  methods: {
    handleToDetail() {
      this.$emit("click", this.info);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.goods-card {
  width: 336px;
  height: 502px;
  image {
    width: 100%;
    height: 336px;
    background: rgba(0, 0, 0, 0);
    border-radius: 16px 16px 0px 0px;
  }
  .goods-info {
    box-sizing: border-box;
    width: 100%;
    height: 166px;
    background: #ffffff;
    box-shadow: 0px 2px 20px rgba(34, 34, 34, 0.1);
    border-radius: 0px 0px 16px 16px;
    padding: 24px 16px 0;
    &-name {
      width: 100%;
      @include textEllipsis;
      @include base-text(44px, 32px, #303133);
      line-height: 44px;
      margin-bottom: 24px;
    }
    &-extra {
      @include normal-flex(left);
      @include base-text(50px, 28px, #303133, 400);
      line-height: 50px;
      .spend-flower {
        flex: 1;
        @include normal-flex(left);
        @include textEllipsis;
        text:first-child {
          color: #ff8000;
          font-size: 36px;
          margin-right: 4px;
        }
      }
      .over {
        color: #909399;
        font-size: 24px;
      }
      .surplus {
        font-size: 24px;
        color: #ff8000;
      }
    }
  }
  .exchange-over {
    .spend-flower {
      text {
        color: #909399 !important;
      }
    }
  }
}
</style>
